<template>

  <v-container fluid class="custom-container" v-touch="{ right:()=>swipe('right')  }">

    <xy-header-top title='入库批次信息'>
      <v-btn icon slot="left" small @click="routerBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>

    <v-layout align-center justify-center>

      <v-flex md6 sm12 xs12>

        <v-card flat style="min-height: 507px">

          <v-card-text style="padding: 5px 16px">
            <v-list dense>
              <v-list-item class="font-weight-bold">
                <v-list-item-content>批次号</v-list-item-content>
                <v-list-item-content>{{inventory.batchNo}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>名称</v-list-item-content>
                <v-list-item-content>{{inventory.material.name|strAbbr7}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>分类</v-list-item-content>
                <v-list-item-content>{{inventory.material.category.name}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>入库数量</v-list-item-content>
                <v-list-item-content>{{inventory.quantity}} &nbsp; {{inventory.unit.name}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>总库存</v-list-item-content>
                <v-list-item-content>{{inventory.totalQuantity}} &nbsp;
                  {{inventory.material.unit.name}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>生产时间</v-list-item-content>
                <v-list-item-content>{{inventory.productionTime | dateFormat | emptyFilter}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>入库时间</v-list-item-content>
                <v-list-item-content>{{inventory.createTime | datetimeFormat}}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>过期时间</v-list-item-content>
                <v-list-item-content>{{inventory.createTime | datetimeFormat }}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>存储条件</v-list-item-content>
                <v-list-item-content>{{inventory.material.attach.storageCondition | emptyFilter}}
                </v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>打印人</v-list-item-content>
                <v-list-item-content>{{userContext.nickname | emptyFilter | strAbbr7 }}</v-list-item-content>
              </v-list-item>

              <v-list-item class="font-weight-bold">
                <v-list-item-content>备注</v-list-item-content>
                <v-list-item-content>{{inventory.descr | emptyFilter | strAbbr7 }}</v-list-item-content>
              </v-list-item>

            </v-list>

          </v-card-text>

          <v-card-actions>
            <xy-button :loading="loading" @click="printHandle">打印</xy-button>
          </v-card-actions>
        </v-card>

      </v-flex>
    </v-layout>
  </v-container>

</template>

<script>
    import {mapState} from 'vuex';

    /**
     * 物料批次详情
     * @author Canaan
     * @date 2019/8/9 15:25.
     */
    export default {
        name: 'inventoryDetail',
        mounted() {
            if (this.inventoryId) {
                this.loadData();
            } else {
                this.loadData(this.$route.query.inventoryId);
            }

        },
        components: {},
        props: {
            inventoryId: {
                default: null,
            }
        },
        data() {
            return {
                loading: false,
                inventory: {
                    material: {
                        name: null,
                        attach: {},
                        unit: {
                            name: null
                        },
                        category: {}
                    },
                    unit: {
                        name: null
                    }
                }
            }
        },
        computed: {
            ...mapState([
                'userContext'
            ])
        },
        methods: {
            routerBack() {
                this.$router.back()
            },
            swipe(cmd) {
                switch (cmd) {
                    case 'right':
                        this.$router.back();
                        break;
                }
            },
            loadData(val) {
                let id = this.inventoryId || val;
                if (!id) {
                    this.inventory = {
                        material: {
                            name: null,
                            category: {},
                            attach: {},
                            unit: {
                                name: null
                            }
                        },
                        unit: {
                            name: null
                        }
                    };
                    return;
                }

                this.$ajax.get('inventory/get_detail', {
                    params: {
                        inventoryId: id
                    }
                }).then(res => {
                    if (res.code !== 'ok') {
                        this.$message.error(res.msg);
                        return;
                    }
                    this.inventory = res.data;
                });

            },
            printHandle() {
                if (!this.inventory || !this.inventory.material || !this.inventory.material.tagTemplate || !this.inventory.material.tagTemplate.id) {
                    this.$message.error("未指定打印模板");
                    return;
                }

                if (this.loading) {
                    return;
                } else {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                    }, 1500)
                }

                let tagTemplate = this.inventory.material.tagTemplate.id;
                this.$ajax.get('tag_template/get/' + tagTemplate).then(response => {
                    if (response.code !== 'ok') {
                        this.$message.error(response.msg);
                        return;
                    }
                    if (response.data.disabled) {
                        this.$message.error("模板不可用");
                        return;
                    }

                    let res = this.$android.printCall({
                        inventory: this.inventory,
                        material: this.inventory.material
                    }, response.data, this.userContext);
                    if (res.code === 'ok') {
                        this.$message.success(res.msg);
                    } else {
                        this.$message.error(res.msg);
                    }
                });

            },
            continueHandle() {
                this.$router.push("/pushInventoryForm");
            }

        },
        watch: {
            inventoryId() {
                this.loadData();
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .v-list-item {
    padding: 0 8px;
  }


</style>
